﻿
@{
    ViewBag.Title = "Index";
}
<h2>Index</h2>


<img src="#" alt="上传的图片" id="upimage" style="width:150px;height:150px" />
<input type="file" id="upfile" />
<input type="button" value="上传" onclick="upfiles()" />

<script src="~/Scripts/jquery-3.4.1.js"></script>
<script>
    function upfiles() {
        var formData = new FormData();  //用于包装上传的文件【术语：表单数据对象】
        //$('#upfile')是jquery根据ID获取HTML元素集合，$('#upfile')[0]是取只第一个
        //.files[0]是从上传元素中获取第一个上传的文件
        var myfile = $('#upfile')[0].files[0];
        formData.append("upfile", myfile); //把获取到文件放到包装容器中，upfile是我们给他的起名，myfile才是文件对象
        //发起AJAX上传
        $.ajax({
            url: '/UpFile/UpFilesValue', //上传用于方法
            type: 'post',       //这里必须使用POST请求
            data: formData,     //上传的包装对象【表单数据对象】
            processData: false, // 使数据不做处理
            contentType: false, // 不要设置Content-Type请求头
            success: function (res) {
                debugger
                //我们设计了200表示成功，其他表示失败，当然你可以根据自己的喜好设置
                if (res.Code == 200) {

                    alert(res.FileName + '上传成功！');
                    $("#upimage").prop("src", res.FilePath)
                }
                else {
                    alert(res.FileName + '上传失败了，服务器繁忙，请稍后尝试。。。。');
                }
            }
        });
    }
</script>

